<!-- GDSconed.vue -->
<!-- GDFirst.vue -->
<template>
  <div>
    <div style="margin-top: 10px; margin-left: 8px">
      <span style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;">手机号码：</span>
      <el-input style="width: 210px; margin-right: 10px" v-model="phoneInput" placeholder="请输入手机号码"></el-input>
      <span style="display: inline-block; vertical-align:  middle; margin-left: 20px; font-size: 14px;">号码MD5：</span>
      <el-input style="width: 180px; margin-right: 10px" v-model="phoneMD5Input" placeholder="请输入号码MD5"></el-input>
      <span style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;margin-left: 8px">短信类型：</span>
      <el-select  class="page" v-model="LXvalue" placeholder="请选择短信类型">
        <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span  style="display: inline-block; vertical-align: middle; margin-left: 20px; font-size: 14px;">短信模板：</span>

      <el-select  v-model="MBvalue" placeholder="请选择短信模板" style="margin-left: 5px">
        <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span  style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;margin-left: 20px">导入类型：</span>
      <el-select  class="page" v-model="DRvalue" placeholder="请选择导入类型">
        <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span  style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;margin-left: 20px">发送类型：</span>
      <el-select  class="page" v-model="FSvalue" placeholder="请选择发送类型">
        <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <div style="margin-top: 10px">
        <span  style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;margin-left: 8px">外呼任务：</span>
        <el-select  class="page" v-model="WHvalue" placeholder="请选择外呼任务">
          <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <span  style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;margin-left: 20px">添加日期：</span>
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <span  style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;margin-left: 20px">提交时间：</span>
        <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <span style="display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 14px;margin-left: 20px">发送时间：</span>
        <el-date-picker
            v-model="value3"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" style="margin-left: 15px" @click="fetchData">查询</el-button>
      </div>
    </div>
    <el-table :data="FTable" style="width: 100%; margin: 15px 0px">
      <el-table-column prop="fid" label="编号"></el-table-column>
      <el-table-column prop="fkhsjhm" label="手机号码"></el-table-column>
      <el-table-column :formatter="row => getLabel(options2, row.fdxmb)" label="短信模板"></el-table-column>
      <el-table-column :formatter="row => getLabel(options1, row.fdxlx)" label="类型"></el-table-column>
      <el-table-column :formatter="row => getLabel(options4, row.ffslx)" label="发送类型"></el-table-column>
      <el-table-column :formatter="row => getLabel(options5, row.fwhrw)" label="外呼任务"></el-table-column>
      <el-table-column prop="fbz" label="备注"></el-table-column>
      <el-table-column prop="fsbyy" label="失败原因"></el-table-column>
      <el-table-column prop="address" label="短信条数"></el-table-column>
      <el-table-column prop="fdxtjsj" label="添加时间"></el-table-column>
      <el-table-column prop="fdxfssj" label="提交时间"></el-table-column>
      <el-table-column prop="fdxfssj" label="发送时间"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref ,onMounted } from 'vue';
import axios from 'axios';
import request from "@/utils/request";



const getLabel = (options, value) => {
  const option = options.find(opt => opt.value.toString() === value.toString());
  return option ? option.label : value;
};

const options1 = [
  { value: '0', label: '普通挂机短信' },
  { value: '1', label: '交互挂机短信' },
  { value: '2', label: '群发短信' },
  { value: '3', label: '第三方挂机短信' }
];

const options2 = [
  { value: '0', label: '全部' },
  { value: '1', label: '普通短信模板' },
  { value: '2', label: '智能短链模板' },
  { value: '3', label: '多媒体短信模板' }
];

const options3 = [
  { value: '0', label: '所有' },
  { value: '1', label: '任务导入' },
  { value: '2', label: '手工发送' }
];

const options4 = [
  { value: '1', label: '首发' },
  { value: '2', label: '自动重发' },
  { value: '3', label: '手工重发' }
];



const phoneMD5Input = ref('');
const phoneInput = ref('');  // 手机号码输入框的值
const options5 = [{ value: '0', label: '所有' }];
const LXvalue = ref('');
const MBvalue = ref('');
const DRvalue = ref('');
const FSvalue = ref('');
const WHvalue = ref('');
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const FTable = ref([]);

// 查询数据的函数
const fetchData  = async () => {
  try {
    const params = {
      fkhsjhm: phoneInput.value,
      fkhsjhmmd5: phoneMD5Input.value
    };

    // 如果LXvalue的值不为'0'，则添加到查询参数中
    if (LXvalue.value !== '0') {
      params.fdxlx = LXvalue.value;
    }

    // 如果MBvalue的值不为'0'，则添加到查询参数中
    if (MBvalue.value !== '0') {
      params.fdxmb = MBvalue.value;
    }

    // 对于其他下拉列表，执行类似的检查
    if (DRvalue.value !== '0') {
      params.fdrlx = DRvalue.value;
    }

    if (FSvalue.value !== '0') {
      params.ffslx = FSvalue.value;
    }

    if (WHvalue.value !== '0') {
      params.fwhrw = WHvalue.value;
    }

    // 添加日期范围
    if (value1.value && value1.value.length === 2) {
      params.fdxtjsjStart = value1.value[0];
      params.fdxtjsjEnd = value1.value[1];
    }

    // 提交日期范围
    if (value2.value && value2.value.length === 2) {
      params.fdxSubmitStart = value2.value[0];
      params.fdxSubmitEnd = value2.value[1];
    }

    // 发送日期范围
    if (value3.value && value3.value.length === 2) {
      params.fdxSendStart = value3.value[0];
      params.fdxSendEnd = value3.value[1];
    }

    await request.get('/dxjg/query',{params}).then(res => {

      FTable.value = res.data.body
    })

    // const response = await axios.get('http://localhost:9000/dxjg/query', { params });
    // FTable.value = response.data;  // 假设后端返回的是一个数组
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};


onMounted(async () => {
  try {

    await request.get('/dxjg/query').then(res => {
      FTable.value = res.data.body

    })

    // const response = await axios.get('http://localhost:9000/dxjg/query');
    // FTable.value = response.data;  // 假设后端返回的是一个数组
  } catch (error) {
    console.error("Error fetching initial data:", error);
  }
});
</script>
<style>
</style>